<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">获取数据</button>
<!--
  js的ajax：异步的网络请求；虽然封装了一些网络请求的方法，但是不能跨域；
  jq：ajax是一个函数，直补不过和js的网络请求简写一致，这个函数的底层也是用的XMLHTTPRequest方法但又对这个对象进行了封装，既能同源请求又能跨域
-->
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    /*
    * $.ajax()---通过HTTP请求加载远程数据
    *
    * 参数信息
    * URL：设置地址
    * type：设置请求的方式
    * data：{}，发给服务器的请求参数
    * datatype：数据类型
    * success：成功回调函数
    * error：失败回调函数
        * * */
    $(function(){
        $("#btn").click(function(){
            $.ajax({
                //url:"http://baidu.com?user="+userValue+"&psd="+parseInt(psdValue),get请求方式
                url:"json.json",
                //url:"http://baidu.com",
                type:"get",
                //data:{user:userValue,psd:parseInt(psdValue)},//get方式不用写
                dataType:"json",//如果不指定，默认返回的数据类型是字符串
                success:function(data){
                    var arrs=data.result;
                    var uls=$("<ul></ul>")
                    for(var x in arrs){
                        var lis=$("<li></li>").html(arrs[x].name);
                        uls.append(lis);
                    }
                    $("body").append(uls)
                },
                error:function(){
                    alert("请求失败")
                }
            })
        })
    })
</script>
</body>
</html>